/* eslint-disable */

interface ChartThemeITF {
  color: string,
  shadowColor: string,
  name: string
}

interface EchartsOptionITF {
  xAxisData: Array<string | { value: string }>
  xAxis: any
  yAxis: any
  average: number
  data: Array<number>
  symbol: 'none' | 'circle' | 'emptyCircle'
  type: 'line' | 'scatter'
  chartTheme: ChartThemeITF
  series: any
  grid: any
  axisLabel: any
  smooth?: boolean
  connectNulls?: boolean
}

export const getEchartOption = ({ xAxis, yAxis, xAxisData, data: chartData, chartTheme, type = 'scatter', symbol, average, series, grid, axisLabel, smooth = true, connectNulls= false }: EchartsOptionITF) => {
  const { color, name } = chartTheme || {}
  const labelColor = '#8c8c8c'
  const lineColor = '#f0f0f0'
  let seriesData = chartData
  const isEmpty = !Array.isArray(chartData) || chartData.length === 0
  if (isEmpty) {
    seriesData = [2, 4, 6, 8]
  }

  const option: any = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff',
      renderMode: 'richText',
      formatter(params: Array<{ seriesName: string, dataIndex: number, data: string }>) {
        const { seriesName, dataIndex, data } = params[0]
        // eslint-disable-next-line
        // @ts-ignore
        const seriesValue = xAxis?.[dataIndex]?.value || xAxis?.[dataIndex]
        return `
              <div><span style="font-size: 12px;color:#c2c2c2;">{seriesValue}</span></div>
<div style="display:flex;align-items:center;margin-top:4px;">
    <b style="display: inline-block;width:4px;height:4px;background-color: ${color};border-radius:2px;margin-right:5px;"></b>
<span style="width:60px;font-size:12px;color:#333">${seriesName}</span>
<span style="font-size:12px;color:${color}">${data}</span>
</div>
<div style="display:flex;align-items:center;margin-top:4px;">
<b style="display: inline-block;width:4px;height:4px;background-color:#DFDDDD;border-radius:2px;margin-right:5px;"></b>
<span style="width:60px;font-size:12px;color:#333">${params[1].seriesName}</span>
<span style="font-size:12px;color:${color}">${average}</span>
</div>
            `;
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData,
      axisLine: {
        lineStyle: {
          color: lineColor
        }
      },
      axisLabel: {
        color: labelColor,
        align: 'center',
        showMaxLabel: true,
      },
      axisPointer: {
        show: true,
        lineStyle: {
          type: 'dashed',
          width: 2,
        }
      },
      splitLine: {
        lineStyle: {
          color: lineColor
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
      axisLine: {
        lineStyle: {
          color: lineColor
        }
      },
      axisLabel: {
        formatter: '{value}',
        color: labelColor,
      },
      splitLine: {
        lineStyle: {
          color: lineColor
        }
      }
    },
    grid: {
      borderColor: lineColor,
      top: 10,
      bottom: 30,
      right: 30,
    },
    series: [{
      name,
      symbol: symbol || 'circle',
      symbolSize: isEmpty ? 0 : 10,
      type,
      smooth: smooth,
      data: seriesData,
      connectNulls,
      markLine: {
        lineStyle: {
          color,
          type: 'dashed'
        }
      },
      itemStyle: {
        color,
      },
      z: 3,
    }]
  }
  if (series) {
    option.series = series
  }
  if (xAxis) {
    option.xAxis = xAxis
  }
  if (yAxis) {
    option.yAxis = yAxis
  }
  if (axisLabel) {
    option.xAxis.axisLabel = axisLabel
  }
  if (average > 0) {
    option.series.push({
      name: '平均值',
      type: 'line',
      symbolSize: 0,
      data: new Array(xAxisData.length).fill(average),
      lineStyle: {
        color: '#ECECEC',
      },
      areaStyle: {
        color: 'rgba(236, 236, 236, 0.4)'
      },
      z: 1,
    })
  }
  if (grid) {
    option.grid = grid
  }
  return option
}

export const getBarSeries = (low: Array<number> = [], high: Array<number> = []) => {
  const series1: number[] = []
  const series2: number[] = []
  let sum = 0
  const len = low.length
  low.forEach((item, index) => {
    const min = Math.min(item, high[index])
    const diff = Math.abs(high[index] - item)
    sum = sum + item + high[index]
    series1.push(min)
    series2.push(Math.max(diff, 0.1))
  })

  return {
    series: [{
      interval: 0,
      type: 'bar',
      stack: 'Total',
      barWidth: 10,
      itemStyle: {
        borderColor: 'transparent',
        interval: 0,
        color: 'transparent'
      },
      emphasis: {
        itemStyle: {
          borderColor: 'transparent',
          color: 'transparent'
        }
      },
      data: series1
    },
      {
        type: 'bar',
        stack: 'Total',
        interval: 0,
        itemStyle: {
          interval: 0,
          color: '#47C690'
        },
        data: series2
      }],
    average: sum / 2 / len
  }
}


export const BAR_CHART_OPTION= {
  xAxis: {
    type: 'value',
    minInterval: 1,
    boundaryGap: [0, 0.2],
    axisLabel: { color: '#8C8C8C', fontSize: 12, margin: 7 },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#F0F0F0'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#F0F0F0'
      }
    }
  },
  yAxis: {
    axisTick: { show: false },
    type: 'category',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#F0F0F0'
      }
    },
    axisLabel: { color: '#8C8C8C', fontSize: 12, margin: 12 },
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
      label: {
        show: true,
        padding: 8,
        position: 'right',
        formatter: '{@value} 次',
        color: '#333',
        fontWeight: '500',
        fontSize: 12
      },
      itemStyle: {
        size: 20,
        borderRadius: [0, 5, 5, 0],
        color: '#47C690'
      },
      barWidth: 8,
      barCategoryGap: '20%',
      name: '2012',
      type: 'bar',
      data: [2, 6, 7, 10, 10, 17]
    }
  ]
}
